import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import '../../bean/bean.dart';
import '../../tools/ClipStarPath.dart';
import '../../tools/painter.dart';

class home_page extends StatefulWidget {
  @override
  HomePage createState() => HomePage();
}

class HomePage extends State<home_page> with SingleTickerProviderStateMixin {
  final List<CircleBean> _bobbleList = [];
  List block = [
    {"title": "姓名", "icon": "assets/name.png", "name": "谢乙田"},
    {"title": "性别", "icon": "assets/sex.png", "name": "男"},
    {"title": "年龄", "icon": "assets/age.png", "name": "21"},
    {"title": "生日", "icon": "assets/birthday.png", "name": "10.18"},
    {"title": "星座", "icon": "assets/xingzuo.png", "name": "天秤座"},
    {"title": "生肖", "icon": "assets/shengxiao.png", "name": "龙"},
  ];
  final List list = [];
  late Animation _a_angle, _a_radius, _a_start;
  late AnimationController _controller_angle,
      _controller_radius,
      _controller_start;
  var visible = false;
  @override
  void initState() {
    super.initState();
    CircleBean bean = CircleBean();
    bean.color = const Color(0x2fe6ebfd);
    bean.offset = const Offset(330, 730);
    bean.radius = 90;
    _bobbleList.add(bean);
    _controller_angle =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _a_angle = Tween<double>(begin: 0.0, end: 10.0).animate(_controller_angle)
      ..addListener(() {
        setState(() {});
      });
    _controller_radius =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _a_radius = Tween<double>(begin: 100.0, end: 0).animate(_controller_radius)
      ..addListener(() {
        setState(() {});
      });
    _controller_start =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _a_start = Tween<double>(begin: 17.0, end: 0).animate(_controller_start)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            visible = true;
          });
        }
      });
    ["谢乙田", "10.18", "天秤座", "龙"].forEach((element) {
      list.add(element);
    });
  }

  @override
  void dispose() {
    super.dispose();
    _controller_angle.dispose();
    _controller_radius.dispose();
    _controller_start.dispose();
  }

  @override
  Ticker createTicker(onTick) {
    return Ticker(onTick, debugLabel: 'created by $this');
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light));
    return Scaffold(
        body: Stack(
      children: [
        Column(
          children: [
            Expanded(
              child: Container(
                height: double.infinity,
                decoration: const BoxDecoration(
                    gradient: LinearGradient(
                  colors: [Color(0xff5636cd), Color(0xff80b2ff)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                )),
              ),
            )
          ],
        ),
        CustomPaint(
          size: MediaQuery.of(context).size,
          painter: BGPainter(list: _bobbleList),
        ),
        SafeArea(
            child: CustomScrollView(
          shrinkWrap: true,
          slivers: <Widget>[
            SliverPadding(
              padding: const EdgeInsets.all(20.0),
              sliver: SliverList(
                delegate: SliverChildListDelegate(
                  <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      child: Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: Row(
                              children: List.generate(3, (i) {
                                return Container(
                                    width: 75,
                                    height: 100,
                                    decoration: const BoxDecoration(
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(10)),
                                        color: Colors.white),
                                    child: InkWell(
                                      onTap: () {
                                        setState(() {
                                          if (block[i]["name"] == "--") {
                                            switch (i) {
                                              case 0:
                                                block[i]["name"] = "谢乙田";
                                                break;
                                              case 1:
                                                block[i]["name"] = "男";
                                                break;
                                              case 2:
                                                block[i]["name"] = "20";
                                                break;
                                            }
                                          } else {
                                            block[i]["name"] = "--";
                                          }
                                        });
                                      },
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 15, vertical: 10),
                                        child: Column(
                                          children: [
                                            Padding(
                                              padding: const EdgeInsets.only(
                                                  bottom: 10),
                                              child: SizedBox(
                                                width: 30,
                                                height: 30,
                                                child: Image.asset(
                                                    block[i]["icon"]),
                                              ),
                                            ),
                                            Text(
                                              block[i]["title"],
                                              style: const TextStyle(
                                                  color: Colors.grey,
                                                  fontSize: 10),
                                            ),
                                            Padding(
                                              padding:
                                                  const EdgeInsets.only(top: 3),
                                              child: Text(
                                                block[i]["name"],
                                                style: const TextStyle(
                                                  color: Colors.black,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ));
                              }),
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: Row(
                              children: List.generate(3, (index) {
                                var i = index + 3;
                                return Container(
                                    width: 75,
                                    height: 100,
                                    decoration: const BoxDecoration(
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(10)),
                                        color: Colors.white),
                                    child: InkWell(
                                      onTap: () {
                                        setState(() {
                                          if (block[i]["name"] == "--") {
                                            switch (i) {
                                              case 3:
                                                block[i]["name"] = "10.18";
                                                break;
                                              case 4:
                                                block[i]["name"] = "天秤";
                                                break;
                                              case 5:
                                                block[i]["name"] = "20";
                                                break;
                                            }
                                          } else {
                                            block[i]["name"] = "--";
                                          }
                                        });
                                      },
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 15, vertical: 10),
                                        child: Column(
                                          children: [
                                            Padding(
                                              padding: const EdgeInsets.only(
                                                  bottom: 10),
                                              child: SizedBox(
                                                width: 30,
                                                height: 30,
                                                child: Image.asset(
                                                    block[i]["icon"]),
                                              ),
                                            ),
                                            Text(
                                              block[i]["title"],
                                              style: const TextStyle(
                                                  color: Colors.grey,
                                                  fontSize: 10),
                                            ),
                                            Padding(
                                              padding:
                                                  const EdgeInsets.only(top: 3),
                                              child: Text(
                                                block[i]["name"],
                                                style: const TextStyle(
                                                  color: Colors.black,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ));
                              }),
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                            ),
                          ),
                          Container(
                            child: const Padding(
                              padding: EdgeInsets.only(top: 20),
                              child: Text(
                                "今日运势APP 免费测试每天运气每日神兽守护阻止厄运侵袭赶快测试 领取您的守护神兽~",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 15,
                                ),
                              ),
                            ),
                          ),
                          Offstage(
                            offstage: visible,
                            child: InkWell(
                              onTap: () {
                                _controller_angle.reset();
                                _controller_angle.forward();

                                _controller_radius.reset();
                                _controller_radius.forward();

                                _controller_start.reset();
                                _controller_start.forward();
                              },
                              child: SizedBox(
                                width: double.infinity,
                                height: 300,
                                child: CustomPaint(
                                  size: MediaQuery.of(context).size,
                                  painter: AnimPainter(
                                      list: list,
                                      angle: _a_angle.value,
                                      radius: _a_radius.value,
                                      start: _a_start.value),
                                ),
                              ),
                            ),
                          ),
                          Offstage(
                            offstage: !visible,
                            child: Padding(
                              padding: const EdgeInsets.only(top: 20),
                              child: Container(
                                width: double.infinity,
                                decoration: const BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10)),
                                    color: Color(0xffffd700)),
                                child: Padding(
                                  padding: const EdgeInsets.all(10),
                                  child: Column(
                                    children: [
                                      getStar(),
                                      const Padding(
                                          padding: EdgeInsets.only(top: 10),
                                          child: Text(
                                              "emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm"))
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ))
      ],
    ));
  }

  getStar() {
    Random random = Random();
    int star = random.nextInt(100);
    var xiaoshu, zhengshu;
    if (star < 10) {
      xiaoshu = star / 10;
      zhengshu = 0;
    } else {
      xiaoshu = star % 10 / 10;
      zhengshu = (star / 10 - xiaoshu / 10).floor();
    }
    double size = 20;
    return Row(
      children: List.generate(11, (index) {
        if (index == 0) {
          return Text((star / 10).toString(),
              style: const TextStyle(fontSize: 40));
        } else {
          if (index <= zhengshu) {
            return ClipPath(
              clipper: ClipStarPath(),
              child: SizedBox(
                height: size,
                width: size,
                child: const LinearProgressIndicator(
                  color: Colors.red,
                  backgroundColor: Color(0xffe8e8e8),
                  value: 1,
                ),
              ),
            );
          } else {
            if (zhengshu + 1 == index) {
              return ClipPath(
                clipper: ClipStarPath(),
                child: SizedBox(
                  height: size,
                  width: size,
                  child: LinearProgressIndicator(
                    color: Colors.red,
                    backgroundColor: const Color(0xffe8e8e8),
                    value: xiaoshu,
                  ),
                ),
              );
            } else {
              return ClipPath(
                clipper: ClipStarPath(),
                child: SizedBox(
                  height: size,
                  width: size,
                  child: const LinearProgressIndicator(
                    color: Colors.red,
                    backgroundColor: Color(0xffe8e8e8),
                    value: 0,
                  ),
                ),
              );
            }
          }
        }
      }),
    );
  }
}
